<template>
  <fieldset>
    <legend>modal</legend>
    <button @click="show">点击弹出modal</button>
    <!-- modal是index的子组件 -->
    <modal :visible="isshow" @on-confirm="confirm" @on-cancel="cancel">
        <template slot="alert">
            <h1>警告</h1>
        </template>
        <template slot="text">
            <h4>你为什么突然不笑了呢？</h4>
        </template>
        <!-- <template slot="body">
            <h1>警告</h1>
            <h4>最怕空气突然安静</h4>
        </template> -->
    </modal>
  </fieldset>
</template>
<script>
import modal from "./模态框.vue";

export default {
    data(){
        return{
            isshow:false
        }
    },
  components: {
    modal
  },
  methods:{
      show(){
          console.log(11);
          this.isshow = true;
      },
      //点击确定按钮
      confirm(){
          console.log(111);
          this.isshow = false
      },
      //点击取消按钮
      cancel(){
          console.log(1111111);
          this.isshow = false
      }
  }
};
</script>
